<template>
  <div id="app">
  	<el-container v-if="this.$store.state.token" style="height: 100%">
  		<!--<el-aside  height="100%" style="overflow: hidden;">-->
  			<!--侧边栏导航-->
				    <el-menu 
				      default-active="2"
				      class="el-menu-vertical-demo"
				      @open="handleOpen"
				      @close="handleClose"
				      :collapse="isCollapse"
				      accordion="true"
				      router
				      background-color="#545c64"
				      text-color="#fff"
				      active-text-color="#ffd04b"
				      :unique-opened="true"
				      >
				      <el-submenu index="1">
				        <template slot="title">
				        	<div class="nav">
				        		<i class="el-icon-location"></i>
				        		<span>
				        			首页
				        		</span>
				        	</div>
				        </template>
				        <el-menu-item-group>
				          <el-menu-item index="/index/swiper">轮播图</el-menu-item>
				          <el-menu-item index="/index/adver">广告</el-menu-item>
				          <el-menu-item index="/index/map">地图</el-menu-item>
				          <el-menu-item index="/index/startegy">攻略</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>
				       <el-submenu index="2">
				        <template slot="title">
				        	<i class="el-icon-menu"></i>
				          <span>预约页</span>
				        </template>
				         <el-menu-item-group>
				          <el-menu-item index="/appointment/scenic">景区预约</el-menu-item>
				          <el-menu-item index="/appointment/hotel">酒店预约</el-menu-item>
				          <el-menu-item index="/appointment/food">美食预约</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>
				      <el-submenu index="3">
				        <template slot="title">
				        	<i class="el-icon-edit-outline"></i>
				          <span>文章页</span>
				        </template>
				         <el-menu-item-group>
				          <el-menu-item index="/article/list">文章列表</el-menu-item>
				          <el-menu-item index="/article/swiper">轮播图</el-menu-item>
				        </el-menu-item-group>
				      </el-submenu>
				      <el-menu-item index="/strategy">
				        <i class="el-icon-setting"></i>
				        <span slot="title">攻略景点</span>
				      </el-menu-item>
				      <el-menu-item index="/dynamic">
				        <i class="el-icon-setting"></i>
				        <span slot="title">动态列表</span>
				      </el-menu-item>
				      <el-menu-item index="/recruit">
				        <i class="el-icon-setting"></i>
				        <span slot="title">招聘列表</span>
				      </el-menu-item>
				    </el-menu>
				    
		<!--中间内容-->		    
	  <el-container>
	  	<el-header class="yc_header clear_fix">
	    	<el-radio-group  v-model="isCollapse" style="margin-bottom: 20px;">
				  <el-radio-button class="sq" :label="isFalse">
				  	<i v-if="isFalse" class="sqBtn iconfont icon-zhankai"></i>
				  	<i v-if="isTrue" class="sqBtn iconfont icon-shouqi"></i>
				  </el-radio-button>
				</el-radio-group>
	        		<span @click="toDef" class="Dashboard">Dashboard</span>
	        		<span class="rouName"><em>/</em>{{rouName}}</span>
	        		<span @click="logout" class="logout">退出登录</span>
				</el-header>
				<!--中间内容显示-->
	    	<!--<el-main>-->
	    		<div class="yc_container">
	    			<router-view></router-view>
	    		</div>
	    	<!--</el-main>-->
	  </el-container>
	</el-container>

  	<router-view name="login"></router-view>

  
</div>
</template>

<script type="text/javascript">
	
	export default {
		data() {
      return {
        isCollapse: false,
        rouName:"",
//      isblock:true,
        isTrue:true,
        isFalse:false
      }
    },
    create(){
    	console.log(this.$store.state.token)
    	console.log(1111)
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
        console.log(this.label)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      toDef(){
      	this.$router.push({
      		path:"/"
      	})
      },
      logout(){
//    	console.log(this.$store.state.token.length)
      	this.$Cookie.remove("token");
//    	console.log(this.$Cookie.get("token"));
//    	this.$Cookie.set("token","undefined");
      	this.$store.commit("setToken");
      	console.log("退出登录")
      	this.$router.push({
      		path:'/login'
      	})
      }
    },
    watch:{
    	"$route":function(to,from){
    		console.log(to)
    		if(to.name=="index"){
    			document.querySelector(".Dashboard").style.cursor="text"
    			document.querySelector(".Dashboard").style.color="#97a8be"
    			document.querySelector(".Dashboard").style.fontWeight="normal"
    			document.querySelector(".rouName").style.display="none";
    		}else{
    			document.querySelector(".Dashboard").style.cursor="pointer"
    			document.querySelector(".Dashboard").style.color="#000000"
    			document.querySelector(".Dashboard").style.fontWeight="700"
    			document.querySelector(".rouName").style.display="inline-block"
    		}
    		this.rouName=to.meta.title
    	}
    },
   mounted(){
			this.$nextTick(()=>{
		    	var sq = document.querySelector(".sqBtn");
		    	sq.addEventListener("click",()=>{
						this.isTrue=!this.isTrue
						this.isFalse=!this.isFalse
						console.log(this.isTrue)
		    	})
   		})
		}
    
  }
	
</script>

<style lang="scss">
@import url('./assets/css/reset.css');
@import url('//at.alicdn.com/t/font_1156835_v9hq2fnhsz.css');
	html,body{
		width: 100%;
	height: 100%;
	overflow: hidden;
	}

#app{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.yc_container{
	width: 100%;
	height: 100%;
	overflow: auto;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 201px;
    min-height: 400px;
  }
  
  .el-submenu .el-menu-item {
    min-width: 0 !important;
   }
    
  body > .el-container {
    margin-bottom: 40px;
    height: 100%;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-radio-button__inner {
     border:none !important; 
     padding: 0px !important;
}
.yc_header .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #000;
    background:#fff !important; 
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.el-radio-button__inner:hover {
     color:#000 !important; 
}
.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
    -webkit-box-shadow: none !important;
    box-shadow:none !important;
}
.el-header {
		height: 50px !important;
    padding:0 10px !important; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.zk .iconfont,.sq .iconfont {
	font-size: 20px;
	line-height: 50px;
}
/*.zk,.sq{
	float: left;
}*/
.Dashboard{
	display: inline-block;
	vertical-align: top;
	line-height: 50px;
	margin-left: 20px;
	color: #97a8be;
}
.rouName{
	/*display: inline-block;*/
	vertical-align: top;
	line-height: 50px;
	margin-left: 10px;
	color: #97a8be;
	font-size: 14px;
	display: none;
	em{
		padding-right:5px ;
	}
}
.logout{
	display: inline;
	float: right;
	vertical-align: top;
	line-height: 50px;
	margin-right: 20px;
	color: #000;
	font-size: 16px;
	cursor: pointer;
}
.logout:hover{
	color: #ff4500;
}
.yc_header{
	height: 50px;
	background: #fff;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
}
.el-table__row td .cell {
    white-space: nowrap;
    text-overflow: ellipsis;
}
.el-menu--collapse {
    width: 65px;
}
.urlBox .el-form-item__label {
    text-align: left !important; 
    font-weight: 700;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.urlBox .el-input[data-v-7e6eaaef] {
    display: inline-block;
    width: 100%;
}
.titBox .el-form-item__label {
		width: 112px !important;
    text-align: right;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
		font-weight: 700;
}
.titBox .el-form-item__content {
    width: 70%;
    line-height: 40px;
    position: relative;
    font-size: 14px;
		margin-left: 130px !important;
}
</style>
